<template>
  <div class="piecing">
      <p class="piecing-tip clearfix">
        <span class="pull-left" @click="cancelCanvasDraw">取消</span>
        <span class="pull-right" @click="htmlToIMG">{{imgUrl ? '长按保存到手机' : '完成'}}</span>
      </p>
      
      <div class="piecing-main text-center" ref="piecingMain" :class="{'middle': !isOverflow}">
        <img :src="imgUrl" alt="#" v-if="imgUrl">
        <PiecingPopup 
            v-show="!imgUrl"
            :piecingStyle="piecingStyle"
            :info="cloneInfomation"
            :puzzleMode="puzzleMode"
            @set-img-url="setImgUrl"
            @set-wrapper-class="setWrapperClass"
            ref="piecingDialog"
        ></PiecingPopup>  
      </div>
      
      <div class="option-bar" 
        v-show="!imgUrl && modifyType === ''"
      >
          <div class="option-bar-item">
              <button type="button" class="button" @click="showModifyPanel('title')">修改标题</button> 
          </div>
          <div class="option-bar-item">
              <button type="button" class="button" @click="showModifyPanel('style')">切换样式</button> 
          </div>
      </div>

    <div class="panel-modify-title"
        :class="{'show': modifyType !== ''}"
    >
        <div class="panel-head"><h5 class="panel-head-title">标题</h5></div>
        <div class="panel-body">
            <div class="title-item" v-if="modifyType === 'title'">
                <div class="form clearfix">
                    <textarea v-model="cloneInfomation.title" class="pull-left"></textarea>
                </div>
                <p class="secondary">
                    <span class="modal-checkbox"
                        :class="{'active': cloneInfomation.isAgree}"
                    ></span> 不显示时间地点
                </p>
            </div>

            <div class="style-groups" v-if="modifyType === 'style'">
                <div class="style-item" 
                    v-for="(item, index) in styleLists"
                    :rel="index"
                    :key="'a'+index"
                    :style="{'color': item.color, 'background-color': item.background}"
                    :class="{'active': index == selectedStyleIndex}"
                    @click="selectedStyleIndex = index"
                >{{item.text}}</div>
            </div>
        </div>

        <div class="panel-option">
            <button type="button" class="button-block"
                @click="setStyle"
            >确定</button>
        </div>
    </div>
  </div>
</template>

<script>
import PiecingPopup from './PiecingPopup.vue';

export default {
    components: {
        PiecingPopup
    },
    props: {
        puzzleMode: {
            type: String,
            default: 'photo'
        },
        liveInfomation: {
            type: Object
        }
    },
    data() {
        return {
            isOverflow: false,
            imgUrl:'',
            toIMGStatus: false,
            isShowModifyPanel: false,
            modifyType: '',
            selectedStyleIndex: 0,
            styleLists: [
                { text: '默认', color: '#0084FF',     background: 'rgba(0,132,255,.2)' },
                { text: '喜庆', color: 'rgba(255, 168, 0, 1)',    background: '#ca0e22' },
                { text: '商务', color: '#fff',        background: '#231d1d' },
                { text: '清新', color: '#6BB519',     background: 'rgba(107, 181, 25, 0.3)' },
                { text: '粉红', color: '#FE4161',     background: 'rgba(254, 65, 97, 0.3)' }
            ],
            cloneInfomation:{...JSON.parse(JSON.stringify(this.liveInfomation)),...{isAgree: true}}
        };
    },
    computed: {
        piecingStyle(){
            return this.styleLists[this.selectedStyleIndex];
        }
    },
    methods: {
        setStyle(){
            this.isShowModifyPanel = false;
            this.modifyType = '';
        },
        showModifyPanel(type){
            this.isShowModifyPanel = true;
            this.modifyType = type;
        },
        htmlToIMG(){
            this.$refs.piecingDialog.getSynthesizedImgUrl();
            console.log('将html转换为图片')
        },
        setImgUrl(url){
            this.imgUrl = url;
        },
        cancelCanvasDraw(){
            this.imgUrl = '';
            this.modifyType = '';
            this.$emit('cancel-piecing');
        },
        setWrapperClass(contentHeight){
            let wrapperHeight = this.$refs.piecingMain.clientHeight;
            this.isOverflow = contentHeight > wrapperHeight;
        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.piecing {
    position: fixed;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
    padding: 0 44px;
    background: #fff;
    z-index: 120;
    transition: all ease-in-out .3s;
    
    .piecing-tip {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 0 44px;
        font-size: 28px;
        color: #333;
        line-height: 80px;
        text-align: center;
        background-color: rgba(255,255,255, .45);
    }

    .piecing-main {
        height: calc(100% - 140px - 80px);
        display: block;
        margin-top: 80px;
        overflow: auto;
        font-size: 0;

        &.middle {
            display: flex;
            align-items: center;
        }

        > img {
            border-radius: 8px;
        }
    }

    .option-bar {
        display: flex;    
        width: 100%;
        background: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .option-bar-item {
        height: 140px;
        flex: 1;
        align-items: center;
        text-align: center;

        .button {
            width: 268px;
            height: 82px;
            border: 2px solid #ccc;
            font-size: 32px;
            color: #333;
            background: transparent;
            line-height: 80px;
            border-radius: 40px;
        }
    }


}

.panel-modify-title {
    width: 100%;
    padding: 20px 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-radius: 20px 20px 0px 0px;
    transform: translate3d(0, 100%, 0);
    transition: all ease-in-out .3s;
    &.show{
        transform: translate3d(0, 0, 0);
    }

    .panel-head-title {
        height: 80px;
        line-height: 80px;
        font-size: 28px;
        color: #353535;
        text-align: center;
        font-weight: bold;
    }

    textarea {
        width: 100%;
        height: 160px;
        padding: 16px;
        border: 0 none;
        background:rgba(245,246,247,1);
        font-size: 32px;
        color: #353535;
        border-radius:20px;
    }

    .secondary {
        padding: 20px 0;
        font-size: 28px;
        color: #353535;
        line-height: 2;
        .modal-checkbox {
            position: static;
            vertical-align: middle;
        }
    }

    .panel-option {
        .button-block {
            display: block;
            width: 100%;
            height: 84px;
            font-size: 28px;
            color: #fff;
            line-height: 84px;
            background-color: #0083FF;
            border-radius: 8px;
        }
    }

    .style-groups {
        display: flex;
        padding: 10px 0 30px;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
    }
    
    .style-item {
        width: 120px;
        height: 120px;
        margin-right: 20px; 
        font-size: 28px;
        line-height: 120px;
        border-radius: 12px;
        background-size: 100% 100%;
        &:last-child { margin-right: 0; }
        &.active {
            border: 4px solid #0084FF;
        }
    }
}


</style>